<extend  name="Public:base" />
<block name="head">
    <link rel="stylesheet" href="__PUBLIC__/Admin/css/admin.css">
</block>
<block name="content_header"></block>
<block name="toolbar"></block>
<block name="content_body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">

                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">每天登陆次数变化</div>
                            <div class="layui-card-body">
                                <div class="layui-carousel layadmin-carousel layadmin-dataview">
                                    <div carousel-item="">
                                        <div id="line" style="height: 100%;"></div>
                                    </div>
                                    <div class="layui-carousel-ind">
                                        <ul>
                                            <li></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th colspan="2" scope="col">服务器信息</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th width="30%">服务器域名</th>
                                <td><span id="lbServerName">{$info.info_00}</span></td>
                            </tr>
                            <tr>
                                <td>服务器IP地址</td>
                                <td>{$info.info_02}</td>
                            </tr>
                            <tr>
                                <td>服务器操作系统</td>
                                <td>{$info['info_01']}</td>
                            </tr>
                            <tr>
                                <td>服务器软件配置</td>
                                <td>{$info['info_03']}</td>
                            </tr>
                            <tr>
                                <td>PHP运行方式</td>
                                <td>{$info['info_04']}</td>
                            </tr>
                            <tr>
                                <td>项目路径 </td>
                                <td>{$info['info_05']}</td>
                            </tr>
                            <tr>
                                <td>北京时间 </td>
                                <td id="mytime"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header">平台公告</div>
                    <div class="layui-card-body notice">
                        <table class="layui-hide" id="notice"></table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</block>
<block name="foot_script">
    <script type="text/javascript" src="__PUBLIC__/echarts.min.js"></script>
    <script>
        //JavaScript代码区域
        layui.use(['laydate','carousel','table'], function(){
            var laydate = layui.laydate,carousel = layui.carousel,table = layui.table;
            carousel.render({
                elem:'.layadmin-backlog'
                ,width: '100%' //设置容器宽度
                ,height: '280px' //高度
                ,arrow: 'none' //始终显示箭头
                ,autoplay: false
                ,trigger: 'mouseover'
            });
            carousel.render({
                elem:'.layadmin-dataview'
                ,width: '100%' //设置容器宽度
                ,height: '280px' //高度
                ,anim : 'fade' // 动画
                ,arrow: 'none' //始终显示箭头
                ,autoplay: false
                ,trigger: 'mouseover'
            });
            var notice = {$notice};
            table.render({
                elem:'#notice',
                cols:[[
                    {field:'id',title:'ID',width:40},
                    {field:'title',title:'标题'}
                ]],
                // skin:'line',
                data:notice,
                done:function (res, curr, count) {
                    $(".notice .layui-table-header").hide();
                }
            });
            //日期范围
            laydate.render({
                elem: '#searchDate'
                ,range: true
                ,theme: '#393D49'
            });
        });
        var myChart = echarts.init(document.getElementById('line'));
        var data = JSON.parse('{$kline}');
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.day
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'用户收益',
                    type:'line',
                    data:data.data,
                    smooth: true
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        function showTime(){
            nowtime=new Date();
            year=nowtime.getFullYear();
            month=nowtime.getMonth()+1;
            date=nowtime.getDate();
            document.getElementById("mytime").innerText=year+"年"+month+"月"+date+"日 "+nowtime.toLocaleTimeString();
        }
        setInterval("showTime()",1000);
    </script>
</block>